<!DOCTYPE html>
<html xmlns:th="http://wwww.thymeleaf.prg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<html lang="en">
<head>
    <link rel="shortcut icon" href="/images/love.ico" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .divloading {
            position: absolute;
            z-index: 99;
            top: 62%;
            left: 51%;
            width: 50px;
            height: 50px;
            display: none;
        }

        #main {
            padding-left: 8%;
            text-align: left;
        }
    </style>
    <title>项目申请</title>

    <link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/css/demo.css">
    <link href="/dist/styles.imageuploader.css" rel="stylesheet" type="text/css">

    <script src="/js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="/dist/jquery.imageuploader.js" type="text/javascript"></script>
</head>
<body>
<input id="accepter_id" type="hidden" th:value="${session.accepter.id}">

<section role="main" class="l-main" style="margin-top:50px;margin-bottom:50px;">
    <div style="float: right"><a th:href="@{'/accepter/mySeekHelp?id='+${session.accepter.id}}">查看我的申请</a>
    </div>
    <header class="site-header">
        <h1 class="site-title l-site-title" style="font-size:1.2em;">项目申请</h1>
    </header>
    <div id="main" class="uploader__box l-center-box">


        <div class="divloading">
            <img src="/images/loading.gif" width="100%" height="100%"/>
        </div>
        <!--<h2>创建项目：</h2>-->
        <!--<p>项目类型：-->
        <!--<select>-->
        <!--<option value="0">报名型</option>-->
        <!--<option value="1">捐助型</option>-->
        <!--</select>-->
        <!--</p>-->
        <input id="accepterId" type="hidden" th:value="${session.accepter.id}">
        <p>
            标题：
            <input type="text" id="topic">
        </p>

        <p>
            具体信息：
            <textarea style="width:400px;height:100px;overflow-x: hidden;overflow-y: hidden;vertical-align:top"
                      id="message" placeholder="请按实际情况描述，不要夸大其词！（将影响项目审核）">
            </textarea>
        </p>
        <p>
            您的联系方式：
            <input type="text" id="telephone" th:value="${session.accepter.telephone}">
        </p>


        <p>

            需要资金： <input type="text" id="money">元<br>
        <p>&nbsp;&nbsp;您的收款方式：(支付宝收款手机号)<input type="text" id="alipyNum"></p>
        <p>&nbsp;&nbsp;地址：（请尽可能精确）<input type="text" id="address"></p>
        <p style="font-size: 10px;color: #ee4611">需要志愿者类项目请填写公益活动地址/其他请填写现住地址</p>
        需要志愿者:<input type="text" id="volunteer">人<br>

        <p id="good">
            需要物品：<br>
            &nbsp;物品名称:<input type="text" name="goodsName" id="name1">
            &nbsp;物品个数:<input type="text" class="goodsNum" id="num1">
        </p>
        <input id="addGood" type="button" value="添加">


        <p id="bbb">
            证明人：
            <input type="text" name="certifier">
            证明人联系方式：<input type="text" class="certifierTelephone">
        </p>

        <p class="notes">至少写一人！</p>

        <input id="add" type="button" value="添加">


        <p>
            项目结束时间：
            <input type="date" id="endTime" min="" value="">
        </p>


        <p>上传本人与身份证正面照（带头像一面）合照：<br>

            <img id="touxiang" src="" width="100px"
                 height="80px">
        <form enctype="multipart/form-data" id="upImg">
            <input id="file" name="img" type="file" value="上传合照">
        </form>
        </p>

        <p>是否同意相关承诺书<input type="checkbox"></p>


        <p>
            上传相关证明图片：<span style="font-size: 15px;color: #ee4611">第一张请上传能反应具体情况的照片。审核通过后会当作封面！</span><br>
            <span style="font-size: 15px;color: #ee4611">注意：上传一张或一张以上之后，下方才会弹出提交按钮</span><br>

    </div>
    <div class="uploader__box js-uploader__box l-center-box">
        <form action="#" method="POST" id="upData">
            <div class="uploader__contents">
                <label class="button button--secondary" for="fileinput">请选择文件</label>
                <input id="fileinput" class="uploader__file-input" type="file" multiple value="Select Files">
            </div>
            <input class="button button--big-bottom" type="submit" value="Upload Selected Files">
        </form>
    </div>
    <!--<input id="file" name="img" type="file" value="上传图片">-->
    <!--<img id="img" src="" width="50px" height="50px">-->
    <!--<input type="button" id="change" value="修改">-->

    </p>


</section>

</body>

<script type="text/javascript">
    (function () {
        var time = new Date();
        var day = ("0" + time.getDate()).slice(-2);
        var month = ("0" + (time.getMonth() + 1)).slice(-2);
        var today = time.getFullYear() + "-" + (month) + "-" + (day);

        $('#endTime').val(today);


        $("#file").on("change", function () {
            var path = $("#file").val();
            if (checking(path)) {
                var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                $("#touxiang").attr("src", objUrl); //将图片路径存入src中，显示出图片
            } else {
                alert("上传类型必须为图片！");
            }
        });


        $("#add").on("click", function () {
            var addInfo = "<p>证明人：" +
                "<input type='text'   name='certifier' id='#certifier'>证明人联系方式：<input type='text'  class='certifierTelephone' id='#telephone'> <input class='aa' type='button' value='删除'></p>";
            $("#bbb").append(addInfo);


        });
        $("body").on("click", ".aa", function (e) {
            $(this).parent().remove();
        });

        $("#addGood").on("click", function () {
            var addInfo = "<p>&nbsp;物品名称:<input type='text' name='goodsName' id='name'>" +
                "&nbsp;物品个数:<input type='text ' class='goodsNum' id='num;'><input class='aa' type='button' value='删除'></p>";
            $("#good").append(addInfo);
        });


        function checking(path) {
            if (path.length == 0) {
                alert("上传为空");
                return false;
            } else {
                var extStart = path.lastIndexOf('.'),
                    ext = path.substring(extStart, path.length).toUpperCase();
                if (ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF') {
                    return false;
                } else {
                    return true;
                }
            }
        }

        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        $('.js-uploader__box').uploader({
            'selectButtonCopy': '请选择或拖拽文件',
            'instructionsCopy': '你可以选择或拖拽多个文件',
            'submitButtonCopy': '提交所有信息（包含文件和上方所有信息，请再三检查后提交）',
            'furtherInstructionsCopy': '你可以选择或拖拽更多的文件',
            'secondarySelectButtonCopy': '选择更多的文件'
        });
    }());
</script>
</html>